<template>
  <!-- MyInput 肯定是基于 原生的 input 来实现的 -->
  <!-- v-model 不能绑定一个 prop，违反了单向数据流 -->
  <input type="text" :value="value" @input="onInput">
</template>

<script>
export default {
  name: 'MyInput',
  props: {
    value: String
  },
  methods: {
    onInput(e) {
      // 触发了onInput，就说明用户在input中输入了新内容
      // e.target.value 获取到input中最新的内容
      // 不能直接给prop赋值：this.value = e.target.value
      // 通过子传父通讯方案
      this.$emit('input', e.target.value)
    }
  }
}
</script>

<style scoped>
  input {
    border: 5px solid hotpink;
  }
</style>